<template>
  <NMessageProvider>
    <n-layout has-sider>
      <n-layout-sider bordered content-style="padding: 24px;">
        <n-menu
          mode="vertical"
          :options="menuOptions"
          @update:value="handleMenuSelect"
        />
      </n-layout-sider>
      <n-layout-content content-style="padding: 24px;">
        <RouterView />
      </n-layout-content>
    </n-layout>
  </NMessageProvider>
</template>

<script setup lang="ts">
import { NMessageProvider, NLayout, NLayoutSider, NLayoutContent, NMenu } from 'naive-ui'
import { RouterView, useRouter } from 'vue-router'
const router = useRouter()

const menuOptions = [
  { label: '仪表盘', key: '/', },
  { label: '新闻管理', key: '/news' },
  { label: '用户管理', key: '/users' },
  { label: '评论管理', key: '/comments' },
]

const handleMenuSelect = (key: string) => {
  router.push(key)
}
</script>

<style scoped>
.n-layout {
  height: 100vh;
}
.n-layout-sider {
  height: 100%;
  background-color: #001428;
}
.n-layout-sider :deep(.n-menu) {
  --n-item-text-color: #ffffff !important;    /* 悬浮时的文字颜色*/
  --n-item-text-color-hover: #767ccf !important;   /* 悬浮时的文字颜色*/
  --n-item-text-color-active: #ffffff !important;    /* 选中时的文字颜色*/
  --n-item-text-color-child-active: #817575 !important;
  --n-item-color-active: #2D8CF0 !important;
}
/* 增加更具体的选择器 */
.n-layout-sider :deep(.n-menu .n-menu-item-content) {
  color: #ffffff !important;
}
.n-layout-sider :deep(.n-menu-item.n-menu-item--selected) {
  background-color: #2D8CF0 !important;
}
</style>
